<script>
  import { normal_option } from '../common'
  import Base from './Base'

  export default {
    name: 'ChartPie',
    mixins: [Base],
    data() {
      return {
        defaultOption: {
          ...normal_option,
          ...{
            grid: {
              top: 20,
              bottom: 40,
              right: 20
            },
            tooltip: {
              show: true, //显示提示框
              formatter: function(params) {
                return `${params.name + ': ' + params.data.tooltip_value}`
              }
            },
            legend: {
              show: true,
              orient: 'vertical',// 纵向
              align: 'left',
              right: '5%',
              top: 'middle',
              formatter: function(name) {
                return name && name.length > 8 ? name.substr(0, 8) + '...' : name
              },
              textStyle: {
                // lineHeight: 25,
                rich: {
                  a: {
                    fontWeight: 500,
                    color: "#000",
                  },
                },
              },
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['0', '60%'],
              center: ['35%', '50%'],
              labelLine: {
                show: false
              },
              label: {
                show: false
              },
              showEmptyCircle: false
            }
          ]
        }
      }
    },
    computed: {
      option: function() {
        let color = this.dataset.option && this.dataset.option.color ? this.dataset.option.color : [];
        let formatter = this.dataset.option && this.dataset.option.legend && this.dataset.option.legend.formatter ? this.dataset.option.legend.formatter : this.defaultOption.legend.formatter;
        let tooltip = this.dataset.option && this.dataset.option.tooltip ? this.dataset.option.tooltip : this.defaultOption.tooltip;

        return {
          ...this.defaultOption,
          color,
          legend: {
            ...this.defaultOption.legend,
            formatter: formatter
          },
          tooltip,
          dataset: {
            dimensions: this.dataset.dimensions,
            source: this.dataset.source.reduce((r, c) => {
              r.push({
                ...c,
                tooltip_value: c[this.dataset.dimensions[1]]
              })
              return r
            }, [])
          }
        }
      }
    }
  }
</script>
